<template>
    <div class="groupBox">
        <div class="group_header">
            <image src="http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/jxd/%E7%A7%92%E6%9D%80%E5%9B%BE.png" class="group_header_img"></image>
            <text class="group_header_title">{{content.title}}</text>
            <div class="group_header_dateConetnt">
                <div class="group_header_content_titleBox">
                    <text class="group_header_content_title">距结束：</text>
                </div>
                <div class="group_header_date">
                    <text class="group_header_date_title">{{date}}</text>
                </div>
                <text class="group_header_date_icon">:</text>
                <div class="group_header_date">
                    <text class="group_header_date_title">{{hou}}</text>
                </div>
                <text class="group_header_date_icon">:</text>
                <div class="group_header_date">
                    <text class="group_header_date_title">{{min}}</text>
                </div>
                <text class="group_header_date_icon">:</text>
                <div class="group_header_date">
                    <text class="group_header_date_title">{{sec}}</text>
                </div>
            </div>
        </div>
        <scroller class="group_content" scroll-direction="horizontal" show-scrollbar="false">
            <div class="group_item" v-for="item in groupForm.itemList" @click="gotobuy(item,groupForm)">
                <image :src="item.thumbnail" class="group_item_img"></image>
                <div class="spike_price_box">
                    <text class="spike_price_title">秒杀价：¥</text>
                    <text class="spike_price">{{item.price}}</text>
                </div>
                <div class="market_price_box">
                    <text class="market_price_title">市场价：¥</text>
                    <text class="market_price">{{item.marketPrice}}</text>
                </div>
            </div>
        </scroller>
    </div>
</template>
<script>
import { list } from "@/api/groupBuy";
import { getInfo } from "@/api/user";
export default {
    data() {
        return {
            groupForm: {},
            date: "",
            hou: "",
            min: "",
            sec: "",
            ssec: "",
            interval: null,
            realNameStatus: "",
        };
    },
    props: ["content"],
    created() {
        this.loadList();
        this.getPersonalInformation();
    },
    beforeDestroy() {
        if (this.interval) {
            //如果定时器还在运行 或者直接关闭，不用判断
            clearInterval(this.interval); //关闭
        }
    },
    methods: {
        loadList() {
            var _this = this;
            list({ type: 4, mchId: _this.getGlobalData().mchId }).then(
                (res) => {
                    console.log(res);
                    if (res.data.data.length > 0) {
                        _this.groupForm = res.data.data[0];
                        if (_this.groupForm.itemList.length > 0) {
                            _this.groupForm.itemList.forEach(function (item) {
                                item.thumbnail = _this.thumbnail(
                                    item.thumbnail,
                                    260,
                                    260
                                );
                            });
                        }
                    }
                    _this.time();
                }
            );
        },
        time() {
            var that = this;
            this.interval = setInterval(function timestampToTime() {
                var date = new Date(that.groupForm.endDate) - new Date();
                //new Date当前的时间戳，也可以换成自定义的时间戳
                if (date > 0) {
                    let time = date / 1000;
                    // 获取时、分、秒,毫秒
                    that.date =
                        Math.floor(date / (24 * 3600 * 1000)) < 10
                            ? "0" + Math.floor(date / (24 * 3600 * 1000))
                            : Math.floor(date / (24 * 3600 * 1000));
                    that.hou =
                        parseInt((time % (60 * 60 * 24)) / 3600) < 10
                            ? "0" + parseInt((time % (60 * 60 * 24)) / 3600)
                            : parseInt((time % (60 * 60 * 24)) / 3600);
                    that.min =
                        parseInt(((time % (60 * 60 * 24)) % 3600) / 60) < 10
                            ? "0" +
                              parseInt(((time % (60 * 60 * 24)) % 3600) / 60)
                            : parseInt(((time % (60 * 60 * 24)) % 3600) / 60);
                    that.sec =
                        parseInt(((time % (60 * 60 * 24)) % 3600) % 60) < 10
                            ? "0" +
                              parseInt(((time % (60 * 60 * 24)) % 3600) % 60)
                            : parseInt(((time % (60 * 60 * 24)) % 3600) % 60);
                } else {
                    //活动已结束，全部设置为'00'
                    (that.date = "00"),
                        (that.hou = "00"),
                        (that.min = "00"),
                        (that.sec = "00");
                }
            }, 100);
        },
        gotobuy(item, groupForm) {
            // if (this.realNameStatus != 2) {
            //     eeui.toast("请先实名认证");
            //     eeui.openPage({
            //         url: "root://pages/member/realName/index.js",
            //         statusBarType: "immersion",
            //         statusBarStyle: false,
            //     });
            //     return false;
            // }
            var obj = {
                productId: item.productId,
                groupId: groupForm.id,
                productType: "group",
                priceBox: item.price,
                marketPrice: item.marketPrice,
            };
            eeui.openPage({
                params: obj,
                url: "root://pages/goods/product/spikeDetails.js",
                statusBarType: "immersion",
                statusBarStyle: false,
            });
        },
        getPersonalInformation() {
            getInfo().then((res) => {
                this.realNameStatus = res.data.userInfo.realNameStatus;
            });
        },
    },
};
</script>
<style scoped>
.groupBox {
    width: 710px;
    margin-left: 20px;
    background-color: white;
    border-radius: 16px;
    margin-top: 20px;
    overflow: hidden;
}
.group_header {
    width: 710px;
    height: 104px;
    /* background-color: tomato; */
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.group_header_img {
    width: 750px;
    height: 124px;
    position: absolute;
    top: -12px;
    left: -10px;
}

.group_header_title {
    font-size: 28px;
    position: absolute;
    left: 100px;
    font-weight: 700;
    color: white;
    width: 124px;
    lines: 1;
    text-overflow: ellipsis;
}

.group_header_dateConetnt {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    right: 20px;
}

.group_header_date {
    width: 50px;
    height: 50px;
    background-color: white;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.group_header_date_icon {
    font-size: 60px;
    color: white;
    margin-left: 4px;
    margin-right: 4px;
}

.group_header_content_titleBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.group_header_content_title {
    font-size: 28px;
    color: white;
    text-align: center;
}

.group_header_date_title {
    font-size: 28px;
    color: coral;
    font-weight: 700;
}

.group_content {
    width: 710px;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    flex-direction: row;
    overflow: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}
.group_item {
    width: 260px;
    /* background-color: coral; */
    margin-right: 10px;
    margin-left: 10px;
}
.group_item:last-child {
    margin-right: 20px;
}
.group_item:first-child {
    margin-left: 20px;
}
.group_item_img {
    width: 260px;
    height: 260px;
    border-radius: 20px;
}
.spike_price_box {
    display: flex;
    flex-direction: row;
    margin-top: 10px;
}
.spike_price_title {
    font-size: 28px;
    color: coral;
    line-height: 40px;
}
.spike_price {
    font-size: 36px;
    font-weight: 700;
    color: tomato;
    line-height: 36px;
}
.market_price_box {
    display: flex;
    flex-direction: row;
    margin-top: 10px;
}
.market_price_title {
    font-size: 28px;
    color: #333;
    line-height: 32px;
}
.market_price {
    font-size: 28px;
    color: #888888;
    text-decoration: line-through;
}
</style>
